@charset "utf-8";

/********** Global **********/

html,
body {
	width: 100%;
	height: 100%;
	/* font-family: "microsoft yahei", arial, sans-serif; */
	background-color: #0b0f34;
	overflow-x: hidden;
	overflow-y: auto;

}

body {
	margin: 0 auto;
	min-width: 375px;
	max-width: 1920px;
}


/********** Layout **********/

.header {
	position: relative;
	height: 42px;
	box-sizing: border-box;
}

.header-title {
	margin: 0;
	padding: 0;
	line-height: 64px;
	text-align: center;
	font-size: 32px;
	font-weight: 400;
	color: #e9c29d;
}

.wrapper {
	position: absolute;
	top: 36px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	padding: 10px 10px 0 10px;
	min-height: 500px;
	background: url("../img/wrapper-bg.png") no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
}


/* PC */

@media (max-width:1919px) {
	.header {
		height: 36px;
	}

	.header-title {
		line-height: 42px;
		font-size: 22px;
	}

	.wrapper {
		top: 22px;
	}
}


/* Mobile */

@media (max-width:1279px) {
	.header-title {
		max-width: 96%;
	}

	.wrapper {
		background: none;
	}
}


/********** Content **********/

.content {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding: 25px 15px;
	height: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

.col {
	margin: 0 10px;
	height: 100%;
}

.col-l {
	-webkit-flex: 2;
	-ms-flex: 2;
	flex: 2
}

.col-c {
	-webkit-flex: 3;
	-ms-flex: 3;
	flex: 3;
}

.col-r {
	-webkit-flex: 2;
	-ms-flex: 2;
	flex: 2;
}


/* PC */

@media (max-width:1919px) {
	.content {
		padding: 5px 0;
	}
}


/* Mobile */

@media (max-width:1279px) {
	.content {
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.col {
		margin: 5px 0;
	}

	.col-l,
	.col-c,
	.col-r {
		-webkit-flex: none;
		-ms-flex: none;
		flex: none;
	}
}

.xpanel-wrapper {
	padding-bottom: 10px;
	box-sizing: border-box;
}

.xpanel-wrapper {
	height: 100%;
}

/* 当前报警信息 */
.xpanel-wrapper-25 {
	height: 25%;
}

.table_baojing {
	width: 90%;
	color: #FFFFFF;
}

.xpanel-wrapper-30 {
	height: 30%;
}




/* 基础信息 */
.xpanel-wrapper-40 {
	height: 40%;
	color: white;
}

/* 报警趋势折线图 */
.mid-tu {
	position: relative;
	height: 100%;
	width: 98%;
	top: 8%;
	left: 1%;
}

.main {
	position: relative;
	bottom: 5%;
	height: 85%;
	width: 100%;
}


.xpanel-wrapper-45 {
	height: 45%;
}

/* 报警主机柱状图 */
.zhuzhuangtu {
	position: relative;
	height: 92%;
	width: 100%;
}

.main3 {
	position: absolute;
	width: 98%;
	left: 1%;
	height: 93%;
}

.xpanel-wrapper-60 {
	height: 60%;
}

/* 仪表盘 */
.yibiaopan {
	position: relative;
	/* background-color: #E9C29D; */
	width: 98%;
	height: 90%;
	left: 1%;
}

.yibiaopan_1 {
	position: relative;
	float: left;
	width: 50%;
	height: 50%;
}

.yibiaopan_2 {
	float: right;
	position: relative;
	width: 50%;
	/* height: 300px; */
	height: 50%;
}

.yibiaopan_3 {
	float: left;
	position: relative;
	width: 50%;
	/* height: 300px; */
	height: 50%;
}

.yibiaopan_4 {
	float: right;
	position: relative;
	width: 50%;
	/* height: 300px; */
	height: 50%;
}


.xpanel-wrapper-75 {
	height: 75%;
}

/* zabbix卡片形式基础信息 */
.div_info {
	position: relative;
	display: flex;
	top: 5%;
	height: 90%;
	width: 100%;
	color: white;
}

/* 标题 */
.div_info .span {
	/* align-items: center; */
	/* font-weight: 500;
	/* color: white; */
	font-family: "微软雅黑";
	font-size: 3vh;
}


/* 青岛 */
.qd_info {
	width: 48%;
	height: 30%;
	border-radius: 0px;
	border: 2px solid rgb(58, 97, 253);
	box-shadow: rgba(14, 252, 255, 0.53) 1px 2px 10px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px inset;
	/* 	background-color: lightgreen;
	box-shadow: green 1px 2px 100px 1px, green 5px 4px 100px 1px inset; */

}

/* .qd_info2 {
	width: 48%;
	height: 30%;
	border-radius: 0px;
	border: 2px solid red;
	box-shadow: red 1px 2px 10px 1px, red 5px 4px 100px 1px inset;
} */


.yf_info {
	position: absolute;
	left: 52%;
	width: 48%;
	height: 30%;
	border-radius: 0px;
	border: 2px solid rgb(58, 97, 253);
	box-shadow: rgba(14, 252, 255, 0.53) 1px 2px 10px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px inset;
}

.yn_info {
	position: absolute;
	top: 35%;
	width: 48%;
	height: 30%;
	/* background-color: #418a26; */
	border-radius: 0px;
	border: 2px solid rgb(58, 97, 253);
	box-shadow: rgba(14, 252, 255, 0.53) 1px 2px 10px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px inset;
	/* 	background-color: lightgreen;
	box-shadow: green 1px 2px 100px 1px, green 5px 4px 100px 1px inset; */
}

.sy_info {
	position: absolute;
	top: 35%;
	left: 52%;
	width: 48%;
	height: 30%;
	border-radius: 0px;
	border: 2px solid rgb(58, 97, 253);
	box-shadow: rgba(14, 252, 255, 0.53) 1px 2px 10px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px inset;
	/* box-shadow: rgba(14, 252, 255, 0.53) 1px 2px 10px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px inset; */
}

.dy_info {
	position: absolute;
	top: 70%;
	width: 48%;
	height: 30%;
	/* background-color: #418a26; */
	border-radius: 0px;
	border: 2px solid rgb(58, 97, 253);
	box-shadow: rgba(14, 252, 255, 0.53) 1px 2px 10px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px inset;
	/* box-shadow: rgba(14, 252, 255, 0.53) 1px 2px 10px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px inset; */
}

.ac_info {
	position: absolute;
	top: 70%;
	left: 52%;
	width: 48%;
	height: 30%;
	/* background-color: #418a26; */
	border-radius: 0px;
	border: 2px solid rgb(58, 97, 253);
	box-shadow: rgba(14, 252, 255, 0.53) 1px 2px 10px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px inset;
	/* box-shadow: rgba(14, 252, 255, 0.53) 1px 2px 10px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px, rgba(14, 252, 255, 0.34) 5px 4px 100px 1px inset; */
}

.xpanel {
	height: 100%;
	min-height: 100px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
}

.xpanel-l-t {
	background-image: url("../img/panel-l-t.png");
}

.xpanel-l-b {
	background-image: url("../img/panel-l-b.png");
}

.xpanel-c-b {
	background-image: url("../img/panel-c-b.png");
}

.xpanel-r-t {
	background-image: url("../img/panel-r-t.png");
}

.xpanel-r-m {
	background-image: url("../img/panel-r-m.png");
}

.xpanel-r-b {
	background-image: url("../img/panel-r-b.png");
}

.xpanel .title {
	padding-left: 24px;
	height: 44px;
	line-height: 44px;
	font-size: 24px;
	font-weight: normal;
	color: #fff;
	background-image: url("../img/title-bg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.xpanel .title-long {
	background-image: url("../img/title-bg-long.png");
}


/* PC */

@media (max-width:1919px) {
	.xpanel .title {
		padding-left: 20px;
		height: 36px;
		line-height: 36px;
		font-size: 20px;
	}
}


/* tool */

.fill-h {
	height: 100% !important;
	min-height: 100% !important;
}

.no-margin {
	margin: 0 !important;
}

.no-padding {
	padding: 0 !important;
}

.no-bg {
	background: none !important;
}

.no-border {
	border: 0 !important;
}


/* scrollbar */

::-webkit-scrollbar {
	width: 0;
	height: 0;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.3);
}

/* 报警类型饼图 */
.baojing_bingtu {
	position: relative;
	height: 100%;
	width: 100%;
}

.main2 {
	position: relative;
	left: 1%;
	height: 90%;
	width: 98%;
}

/* 当前报警 */
.scroll-box {
	position: relative;
	top: 0%;
	width: 100%;
	height: 14vh;
	border: 0px solid #aa55ff;
	overflow: hidden;
	color: #ff55ff;
	font-size: 2.4vh;
}

.scroll-box .roll {
	padding: 0px;
	margin: 0px;
	list-style: none;
	width: 100%;
	height: 100%;
}

.scroll-box .roll .rol {
	width: 100%;
	height: 7vh;
	line-height: 3.2vh;
	text-align: center;
}
